<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id='btn1' onclick="startLottery()">开始抽奖</button>
		<table border="1px">
			<tr>
				<td id="jp1">奖品1</td>
				<td id="jp2">奖品2</td>
				<td id="jp3">奖品3</td>
			</tr>
			<tr>
				<td id="jp4">奖品4</td>
				<td id="jp5">奖品5</td>
				<td id="jp6">奖品6</td>
			</tr>
			<tr>
				<td id="jp7">奖品7</td>
				<td id="jp8">奖品8</td>
				<td id="jp9">奖品9</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		function startLottery(){
			var x=0;
			var allTd=document.getElementsByTagName('td');
			for (var i = 0; i < allTd.length; i++) {
				allTd[i].style.backgroundColor='white';
				allTd[i].style.color='black';
			}
			document.getElementById('btn1').innerText='抽奖中...';
			var myInterval=setInterval( function(){
			for (var i = 0; i < allTd.length; i++) {
				allTd[i].style.backgroundColor='white';
				allTd[i].style.color='black';
			}
			if(x>=39){
				clearInterval(myInterval);
			}
			var y=randoom();
			allTd[y].style.backgroundColor='red';
			allTd[y].style.color='blue';
			x++;
			},50
			)
			
			setTimeout(function (){
			var prize = document.getElementById('jp'+randoom());
			prize.style.color='red';
			prize.style.backgroundColor='blue';
			document.getElementById('btn1').innerText='继续抽奖';
			},2000);
		}
		// function lotteryResult(){
		// 	var prize = document.getElementById('jp'+randoom());
		// 	prize.style.color='red';
		// 	prize.style.backgroundColor='blue';
		// }
		function randoom(){
			var x=0;
			x = Math.floor(Math.random()*9)+1;
			return x;
		}
	</script>
</html>
